<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    {{ video.name }}
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
    <main class="section">
        <div class="columns">
            <div class="column">
                <video id="example_video_1"
                       class="video-js vjs-default-skin"
                       controls preload="none"
                       width="1200"
                       poster="http://video-js.zencoder.com/oceans-clip.png"
                       data-setup="{}">
                    <source src="{{ video.url }}" type='video/mp4'>
                </video>
            </div>
            <div class="box column is-3">
                <div class="column is-full">
                    <div class="box">
                        <div class="box has-background-primary">
                            <span class="title is-4 has-text-white">章节</span>
                        </div>

                        <div class="box columns is-multiline">
                            {% for lesson in course.lesson_set.all %}
                                <div class="box column has-background-primary is-full">
                                    <span class="title is-5 has-text-white">{{ lesson.name }}</span>
                                    {% for video in lesson.video_set.all %}
                                        <div class="box column has-background-primary-dark">
                                                <span class="title is-6">
                                                    <a class="has-text-link-light"
                                                       href="{% url 'course:video' course.id video.id %}">{{ video.name }}（{{ video.learn_times }}&nbsp;分钟）</a>
                                                </span>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

{% endblock %}